<template>
  <div>
    <!-- p-button -->
    <div class="row">
      <p-button>默认按钮</p-button>
      <p-button type="success">成功按钮</p-button>
      <p-button type="info">信息按钮</p-button>
      <p-button type="warning">警告按钮</p-button>
      <p-button type="danger">危险按钮</p-button>
    </div>
    <div class="row">
      <p-button plain>默认按钮</p-button>
      <p-button
        plain
        type="success"
      >成功按钮</p-button>
      <p-button
        plain
        type="info"
      >信息按钮</p-button>
      <p-button
        plain
        type="warning"
      >警告按钮</p-button>
      <p-button
        plain
        type="danger"
      >危险按钮</p-button>
    </div>
    <div class="row">
      <p-button round>默认按钮</p-button>
      <p-button
        round
        type="success"
      >成功按钮</p-button>
      <p-button
        round
        type="info"
      >信息按钮</p-button>
      <p-button
        round
        type="warning"
      >警告按钮</p-button>
      <p-button
        round
        type="danger"
      >危险按钮</p-button>
    </div>
    <div class="row">
      <p-button
        @click="fn"
        icon="p-icon-add"
        circle
      ></p-button>
      <p-button
        @click="fn"
        icon="p-icon-check"
        circle
        type="success"
      ></p-button>
      <p-button
        @click="fn"
        icon="p-icon-close"
        circle
        type="info"
      ></p-button>
      <p-button
        @click="fn"
        icon="p-icon-help"
        circle
        type="warning"
      ></p-button>
      <p-button
        @click="fn"
        icon="p-icon-star"
        circle
        type="danger"
      ></p-button>
    </div>
    <!-- button disable -->
    <div class="row">
      <p-button
        @click="fn"
        disabled
      >不能选中</p-button>
    </div>
    <!-- dialog -->
    <div class="row">
      <p-button
        type="info"
        @click="ControlsDialog = true"
      >打开dialog</p-button>
      <!-- <p-dialog style="margin-top:15vh"></p-dialog> -->
      <p-dialog width="40%" top="15vh" :visable.sync="ControlsDialog">
        <!-- 使用v-slot只能在template中使用 -->
        <template v-slot:title>
          <h1>我是标题</h1>
        </template>
        <!-- 
              <h3 slot="title">我是标题</h3>
         -->
         <template v-slot:footer>
            <p-button type="info" @click = "ControlsDialog = false">取消</p-button>
            <p-button type="success" @click = "ControlsDialog = false">确认</p-button>
         </template>
      </p-dialog>
    </div>
    <!-- p-input -->
    <div class="row">
      
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      ControlsDialog: false
    };
  },
  methods: {
    fn() {
      console.log(arguments);
    },
  }
};
</script>
<style lang="scss">
.row {
  margin: 0px 10px 20px;
  .p-button {
    margin-right: 15px;
  }
}
</style>
